<template>
  <div class="formBox">
    <div class="form">
      <el-form :model="ruleForm" :rules="rules" label-width="90px">
        <el-form-item label="名称" prop="agency">
          <el-input v-model="ruleForm.agency" placeholder="请输入旅行社名称" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入申请人姓名" />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="veriCode">
          <el-input v-model="ruleForm.veriCode" placeholder="请输入验证码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱账号" />
        </el-form-item>
        <el-form-item label="注册来源" prop="source">
          <el-select v-model="ruleForm.source" placeholder="请选择注册来源">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="省市" prop="address">
          <el-cascader
            v-model="ruleForm.address"
            :options="options"
            @change="handleChange"
            separator="-"
            placeholder="请选择省市"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="detailedAddress">
          <el-input
            v-model="ruleForm.detailedAddress"
            placeholder="请输入详细地址"
          />
        </el-form-item>
        <!-- 分割线 -->
        <div class="divider1"></div>
        <div class="divider2"></div>
        <el-form-item label="常办国家" prop="targetCountry">
          <el-select
            v-model="ruleForm.targetCountry"
            placeholder="请选择常办签国家"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="月办签量" prop="amountPerMonth">
          <el-select
            v-model="ruleForm.amountPerMonth"
            placeholder="请选择月办签量"
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 单选框和忘记密码 -->
      <div class="check-and-forget">
        <div class="check">
          <el-checkbox v-model="checked"></el-checkbox>
          <div class="agree">
            阅读并同意<a href="">服务协议</a>和<a href="">隐私协议</a>
          </div>
        </div>
      </div>
    </div>
    <div class="scanID">
      <div class="box">
        <div class="uploadID">
          <div class="mask">
            <img src="../../assets/image/uploadID.png" alt="" />
          </div>
          <span>上传证件</span>
        </div>
        <div class="steps h-110px w-160px m-auto mb-20px">
          <el-steps direction="vertical" :active="1">
            <el-step title="" />  
            <el-step title="" />
          </el-steps>
        </div>
        <div class="scanning">
          <div class="scanningID">
            <img src="../../assets/image/IDCard.png" alt="" />
          </div>
          <span>开始识别</span>
        </div>
      </div>
    </div>
  </div>
  <div class="notice">
    <el-icon><warning /></el-icon>
    <span>为确保证件审核通过，请核对资料无误再提交!</span>
  </div>
  <div class="submit">
    <button @click="submitForm(ruleForm)">注册</button>
  </div>
</template>
<script>
import { reactive, ref } from "vue";

export default {
  setup() {
    const value = ref([]);
    const ruleForm = reactive({
      agency: undefined,
      name: undefined,
      phone: undefined,
      veriCode: undefined,
      email: undefined,
      source: undefined,
      address: undefined,
      detailedAddress: undefined,
      targetCity: undefined,
      amountPerMonth: undefined,
    });
    // 勾选框勾选状态
    const checked = ref(false);
    // 选择省市
    const handleChange = (value) => {
      console.log(value);
    };
    // 表单检验
    const rules = reactive({
      agency: [
        {
          required: true,
          message: "请输入旅行社名称",
          trigger: "blur",
        },
        // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
      ],
      name: [
        {
          required: true,
          message: "请输入申请人姓名",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          message: "请输入手机号码",
          trigger: "blur",
        },
      ],
      veriCode: [
        {
          required: true,
          message: "请输入验证码",
          trigger: "blur",
        },
      ],
      email: [
        {
          required: true,
          message: "请输入邮箱账号",
          trigger: "blur",
        },
      ],
      source: [
        {
          required: true,
          message: "请选择注册来源",
          trigger: "change",
        },
      ],
      address: [
        {
          required: true,
          type: "array",
          message: "请选择省市",
          trigger: "change",
        },
      ],
      detailedAddress: [
        {
          required: true,
          message: "请输入详细地址",
          trigger: "blur",
        },
      ],
      targetCity: [
        {
          required: false,
          message: "请选择常办签国家",
          trigger: "change",
        },
      ],
      amountPerMonth: [
        {
          required: false,
          message: "请选择月办签量",
          trigger: "change",
        },
      ],
    });
    // 提交表单
    const submitForm = async (data) => {
      console.log(data);
    };
    // 级联选择器内容
    const options = [
      {
        value: "guide",
        label: "Guide",
        children: [
          {
            value: "disciplines",
            label: "Disciplines",
            children: [
              {
                value: "consistency",
                label: "Consistency",
              },
              {
                value: "feedback",
                label: "Feedback",
              },
              {
                value: "efficiency",
                label: "Efficiency",
              },
              {
                value: "controllability",
                label: "Controllability",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "side nav",
                label: "Side Navigation",
              },
              {
                value: "top nav",
                label: "Top Navigation",
              },
            ],
          },
        ],
      },
      {
        value: "component",
        label: "Component",
        children: [
          {
            value: "basic",
            label: "Basic",
            children: [
              {
                value: "layout",
                label: "Layout",
              },
              {
                value: "color",
                label: "Color",
              },
              {
                value: "typography",
                label: "Typography",
              },
              {
                value: "icon",
                label: "Icon",
              },
              {
                value: "button",
                label: "Button",
              },
            ],
          },
          {
            value: "form",
            label: "Form",
            children: [
              {
                value: "radio",
                label: "Radio",
              },
              {
                value: "checkbox",
                label: "Checkbox",
              },
              {
                value: "input",
                label: "Input",
              },
              {
                value: "input-number",
                label: "InputNumber",
              },
              {
                value: "select",
                label: "Select",
              },
              {
                value: "cascader",
                label: "Cascader",
              },
              {
                value: "switch",
                label: "Switch",
              },
              {
                value: "slider",
                label: "Slider",
              },
              {
                value: "time-picker",
                label: "TimePicker",
              },
              {
                value: "date-picker",
                label: "DatePicker",
              },
              {
                value: "datetime-picker",
                label: "DateTimePicker",
              },
              {
                value: "upload",
                label: "Upload",
              },
              {
                value: "rate",
                label: "Rate",
              },
              {
                value: "form",
                label: "Form",
              },
            ],
          },
          {
            value: "data",
            label: "Data",
            children: [
              {
                value: "table",
                label: "Table",
              },
              {
                value: "tag",
                label: "Tag",
              },
              {
                value: "progress",
                label: "Progress",
              },
              {
                value: "tree",
                label: "Tree",
              },
              {
                value: "pagination",
                label: "Pagination",
              },
              {
                value: "badge",
                label: "Badge",
              },
            ],
          },
          {
            value: "notice",
            label: "Notice",
            children: [
              {
                value: "alert",
                label: "Alert",
              },
              {
                value: "loading",
                label: "Loading",
              },
              {
                value: "message",
                label: "Message",
              },
              {
                value: "message-box",
                label: "MessageBox",
              },
              {
                value: "notification",
                label: "Notification",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "menu",
                label: "Menu",
              },
              {
                value: "tabs",
                label: "Tabs",
              },
              {
                value: "breadcrumb",
                label: "Breadcrumb",
              },
              {
                value: "dropdown",
                label: "Dropdown",
              },
              {
                value: "steps",
                label: "Steps",
              },
            ],
          },
          {
            value: "others",
            label: "Others",
            children: [
              {
                value: "dialog",
                label: "Dialog",
              },
              {
                value: "tooltip",
                label: "Tooltip",
              },
              {
                value: "popover",
                label: "Popover",
              },
              {
                value: "card",
                label: "Card",
              },
              {
                value: "carousel",
                label: "Carousel",
              },
              {
                value: "collapse",
                label: "Collapse",
              },
            ],
          },
        ],
      },
      {
        value: "resource",
        label: "Resource",
        children: [
          {
            value: "axure",
            label: "Axure Components",
          },
          {
            value: "sketch",
            label: "Sketch Templates",
          },
          {
            value: "docs",
            label: "Design Documentation",
          },
        ],
      },
    ];
    return {
      ruleForm,
      rules,
      submitForm,
      value,
      options,
      handleChange,
      checked,
    };
  },
};
</script>
<style lang="less">
@import url("./agencyRegister.less");
</style>
<route lang="yaml">
meta:
  level: 1
  name: "agencyRegister"
  str: "旅行社注册"
  layout: agencyRegisterLayout
</route>
